<template>
	<div>
		<div class="container">
			<div class="static">
				<el-input placeholder="请输入要查询的试题名称" size="medium" v-model="searchContent" ></el-input>
				<el-button icon="el-icon-search" size="medium" @click="seach({ title: searchContent })"></el-button>
				<el-button type="primary" size="medium" @click="addDialogVisible = true">添加题目</el-button>
				<el-upload
  class="upload-demo"
  action="/api/admin/addExcels"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  multiple
  :limit="1"
  :on-exceed="handleExceed"
  :file-list="fileList">
  <el-button size="medium" type="primary" class="luot_wei">点击上传</el-button>
</el-upload>
			</div>
			<!-- 表格 -->
			<!-- 题号 题目 答案 分值 操作 -->
			<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%">
				<el-table-column label="题号" >
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.serial }}</span>
					</template>
				</el-table-column>
				<el-table-column label="题目" >
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.question }}</span>
					</template>
				</el-table-column>
				<el-table-column label="答案" >
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.answer }}</span>
					</template>
				</el-table-column>
				<el-table-column label="分值" >
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.score }}</span>
					</template>
				</el-table-column>
								<el-table-column label="所属试题">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.title }}</span>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button size="mini" @click="handleEdit(scope.row,scope.$index)">编辑</el-button>
						<el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>

			<!-- 分页区域 -->
			<div class="block" style="margin-top:15px;">
				<el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="currentPage" :page-sizes="[10,15,20]" :page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="tableData.length">
				</el-pagination>
			</div>



			<!-- 添加的对话框 -->
			<el-dialog title="添加账号" :visible.sync="addDialogVisible" width="50%">
				<!-- 内容主体区 -->
				<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
					<el-form-item label="题号" prop="serial">
						<el-input v-model="addForm.serial"></el-input>
					</el-form-item>
					<el-form-item label="题目" prop="question">
						<el-input v-model="addForm.question"></el-input>
					</el-form-item>
					<el-form-item label="答案" prop="answer">
						<el-input v-model="addForm.answer"></el-input>
					</el-form-item>
					<el-form-item label="分值" prop="score">
						<el-input v-model="addForm.score"></el-input>
					</el-form-item>
					<el-form-item label="试题" prop="score">
						<el-select v-model="addForm.title" placeholder="请选择" >
            <el-option
              v-for="item in volume"
              :key="item.id"
              :label="item.title"
              :value="item.title"
            >
              <span style="float: left">{{ item.title }}</span>
            </el-option>
          </el-select>
					</el-form-item>
				</el-form>
				<!-- 底部区域 -->
				<span slot="footer" class="dialog-footer">
					<el-button @click="addDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="addOperator">确 定</el-button>
				</span>
			</el-dialog>

			<!-- 编辑区域 -->
			<el-dialog title="编辑信息" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
				<div>
					<el-form ref="form" :model="editForm" label-width="80px">
						<el-form-item label="题号">
							<el-input v-model="editForm.serial"></el-input>
						</el-form-item>
						<el-form-item label="题目">
							<el-input v-model="editForm.question"></el-input>
						</el-form-item>
						<el-form-item label="答案">
							<el-input v-model="editForm.answer"></el-input>
						</el-form-item>
						<el-form-item label="分值">
							<el-input v-model="editForm.score"></el-input>
						</el-form-item>
					</el-form>
				</div>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="confirm">确 定</el-button>
				</span>
			</el-dialog>
		</div>
	</div>
	</div>
</template>

<script>
export default {
  data() {
    return {
      searchContent: "",
      fileList: [],
      filterDataShow: [], //储存符合条件的数据
      tableData: [],
      volume: [],
      // 控制添加对话框的显示与隐藏
      addDialogVisible: false,
      // 添加表单数据
      addForm: {
        serial: "",
        question: "",
        answer: "",
        score: "",
        title: "",
      },
      // 添加表单的验证规则对象
      addFormRules: {
        serial: [
          {
            required: true,
            message: "请输入题号",
            trigger: "blur",
          },
          {
            min: 3,
            max: 10,
            message: "账号的长度在1-10个字符之间",
            trigger: "blur",
          },
        ],
        question: [
          {
            required: true,
            message: "请输入题目",
            trigger: "blur",
          },
          {
            min: 3,
            max: 12,
            message: "题目的长度在2-100个字符之间",
            trigger: "blur",
          },
        ],
        answer: [
          {
            required: true,
            message: "请输入答案",
            trigger: "blur",
          },
          {
            min: 3,
            max: 12,
            message: "题目的长度在2-100个字符之间",
            trigger: "blur",
          },
        ],
        score: [
          {
            required: true,
            message: "请设置分值",
            trigger: "blur",
          },
          {
            min: 3,
            max: 12,
            message: "题目的长度在1-6个字符之间",
            trigger: "blur",
          },
        ],
      },
      // 控制编辑框是否显示
      dialogVisible: false,
      editForm: {
        serial: "",
        question: "",
        answer: "",
        score: "",
      },
      userIndex: 0,

      //分页前的数据
      currentPage: 1, // 当前页码
      total: 0, // 总条数
      pageSize: 10, // 每页的数据条数
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 点击按钮，添加题目
    addOperator() {
      this.$axios.post("/api/admin/addExam", this.addForm).then((res) => {
        this.seach({});
        this.addForm = {};
      });
    },
    // 编辑数据
    handleEdit(row) {
      //   this.userIndex = index;
      this.editForm = row;
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    confirm() {
      this.dialogVisible = false;
      //   Vue.set(this.tableData, this.userIndex, this.editForm);
      this.$axios.post("/api/admin/upexam", this.editForm).then((res) => {
        this.seach({});
      });
    },

    // 删除一组数据
    handleDelete(row) {
      this.$axios.post("/api/admin/delexam", { id: row.id }).then((res) => {
        this.seach({});
      });
    },

    // 分页
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    // 搜索
    seach(params) {
      this.$axios.post("/api/admin/selExam", params).then(
        // 返回值
        (res) => {
          this.tableData = res.data.data;
          this.total = res.data.data.length;
        }
      );
      this.$axios.post("/api/admin/selAll", {}).then((res) => {
        this.volume = res.data.data;
      });
    },
  },
  created() {
    this.seach({});
  },
};
</script>

<style>
.static {
  display: flex;
  width: 70%;
  margin-bottom: 60px;
  height: 35x;
}

.el-input {
  width: 60%;
}
.el-select {
  width: 400px !important;
}
.luot_wei {
  margin-left: 1vh !important;
}
</style>
